<!-- 
	/**
	 * All rights Reserved, Designed By www.youyacao.com <br>
	 * @Description:新闻详情 <br>
	 * @version 蜻蜓Q系统  <br>
	 * @author:成都市一颗优雅草科技有限公司  <br>
	 * 注意：使用我司开源源代码请遵循license文件的协议仅供个人非盈利使用，禁止用于其他的商业用途
	 * 需要商业用途或者定制开发等可访问songshu.youyacao.com  联系QQ:2853810243 422108995 23625059584
	 * 正版系统查询系统 zhengbancha.youyacao.com
	 */
 -->


<template>
	 <view class="content">
		  <view class="c-title">{{list.title}}</view>
		   <view class="c-header">
					<view class="author-content" v-if="info">
					<view class="avatar-container" @tap="userCenter(info)">
						
					
						 <view class="c-header-icon">  <image :src="info.avatar && info.avatar" mode="aspectFill"></image></view>
						 
						 </view>
						  <view class="author-info">
							   <view class="author-info-title">{{info.nickname}}</view>
							   <view class="author-info-desc">{{info.created_at}}</view>
						  </view>
						  
					</view>
					 <!-- <view class="author-text">	<rich-text :nodes="list.body" class="content"></rich-text></view> -->
					 <view class="author-text"><rich-text :nodes="body"> </rich-text></view>
		   </view>
<!-- 		   <view class="nav-bar">
		   	<nav-bar></nav-bar>
		   </view> -->
	 </view>
</template>


<script>
	import NavBar from '@/components/v-tabbar/v-tabbar.nvue'
import {newsList,getDetails} from '@/common/api.js'
	export default {
				components: {NavBar},
		data() {
			return {
				
				id:"",
				list:[],
				info:[],
				body:'',
				url:require('../../static/images/logo.png'),
			
			};
		},
		
		onShow() {
			
		},
		onLoad(option) {
				this.id=option.id;
				 console.log(option)
				if(option.info){
					this.info=JSON.parse(option.info)
				
				}
				this.getList();
		},
		methods: {
				formatRichText(html) {
								let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
									match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
									match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
									match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
									return match;
								});
								newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
									match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
									return match;
								});
								newContent = newContent.replace(/<br[^>]*\/>/gi, '');
								newContent = newContent.replace(/\<img/gi,
									'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
								return newContent;
							},
						
					
         userCenter(item) {
         	uni.navigateTo({
         		url: `/pages/my/user-center/user-center?user_id=${item.user_id}`
         	})
         },
		 
		 
		 
		 getList(){
			 getDetails(this.id).then(res=>{
			 	if(res.code==200){
			 	this.list= res.data;
				this.body=this.formatRichText(this.list.body)
			 	}
			 	
			 })
		 },
		
		}
	}
</script>

<style>
	page{
		background-color: #fff;
	}
	.nav-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
	}
	.content{
		padding-left: 40rpx;
		padding-right: 40rpx;
		padding-top: 5rpx;
	}
	.c-title{
		/* margin-top: 30rpx; */
		    /* line-height:72rpx; */
		    font-weight: 700;
		    color: #D9D9D9;
		    font-size: 48rpx;
	}
	.c-header-icon{
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	
		margin-right: 20rpx;
	}
	.c-header-icon image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.author-content{
		display: flex;
		margin-top: 30rpx;
	}
	.author-info{
		
	    	font-size: 28rpx;
		    line-height: 28rpx;
		    color: #D9D9D9;
		    display: flex;
		    align-items: center;
		    font-weight: 500;
			display: flex;
			flex-direction: column;
	}
	.author-info-title{
			text-align: left;
			width: 100%;
	}
	.author-info-desc{
		    margin-top: 0.1rpx;
		    font-size: 22rpx;
		    line-height: 22rpx;
		    color: #999;
		    max-width: 123rpx;
		    overflow: hidden;
		    text-overflow: ellipsis;
		    white-space: nowrap;
			margin-top: 14rpx;
	}
	.author-text{
		padding-left: 30rpx;
		padding-right: 30rpx;
		font-size: 36rpx;
		line-height: 70rpx;
		font-weight: 300;
		padding-bottom: 200rpx;
		color: #D9D9D9;
		margin-top: 40rpx;
		  text-align: justify;
		  font-family: -apple-system,helvetica,sans-serif;
	}
</style>
